{% load humanize %}

<h2>What to draw</h2> <p>Please draw shapes around regions that have a
<i>single</i> material or texture.  Some example materials: wood, steel,
bricks, tiles, ceramic, plastic.  If you don't know what to draw, floors,
walls, and countertops are usually one material -- just be careful to exclude
things on top.</p>

<p>Please make the region as tight as possible.  <b>Your shape should exactly
follow the material boundary.</b>  Use the &quot;adjust&quot; button (or
press 'A') to improve the shape boundary.</p>

<p>If there is something like a brick wall or tiled floor, please include all
the tiles; do not draw a square around one tile.  Large regions are
preferable.</p>

<p>Example: if a wood cabinet has a metal handle, then the metal portion is a
different material and should be excluded.  If you are drawing a shape around a
person, their skin and clothing should not be in two different shapes.  You can
also exclude regions by overlapping shapes.  See the below examples.</p>

<p>Draw {{ min_shapes|apnumber }} polygon{{ min_shapes|pluralize }} to complete
the task.</p>

<br/>

<h2>Good examples</h2>

<div class="row-fluid">
	<div class="span4">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/good5.jpg"  alt="" />
			<p class="caption">Large flat regions are preferable, though not necessary.</p>
		</div>
	</div>
	<div class="span4">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/good4.jpg"  alt="" />
			<p class="caption">Make the boundary as tight as possible.</p>
		</div>
	</div>
	{% comment %}
	<div class="span4">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/good10.jpg"  alt="" />
			<p class="caption">Use separate shapes for different flat surfaces.</p>
		</div>
	</div>
	{% endcomment %}
</div>
<div class="row-fluid">
	<div class="span4">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/good12.jpg"  alt="" />
			<p class="caption">Be careful to not include items of a different material.</p>
		</div>
	</div>
	<div class="span4">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/good11.jpg"  alt="" />
			<p class="caption">Shapes can be nested.</p>
		</div>
	</div>
	<div class="span4">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/good9.jpg"  alt="" />
			<p class="caption">Shapes can intersect.</p>
		</div>
	</div>
</div>
<div class="row-fluid">
	<div class="span12">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/segment_material_good2.jpg"  alt="" />
			<p class="caption">Please do not draw around individual bricks; draw a shape around larger wall portions.</p>
		</div>
	</div>
</div>
<div class="row-fluid">
	<div class="span12">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/segment_material_good1.jpg"  alt="" />
		</div>
	</div>
</div>

<br/>

<h2>Bad examples</h2>
<p>We will reject HITs that do not follow these instructions.</p>

<div class="row-fluid">
	<div class="span6">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/segment_material_bad1.jpg"  alt="" />
			<p class="caption">These are sloppy shapes.</p>
		</div>
	</div>
	<div class="span6">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/segment_material_bad2.jpg"  alt="" />
			<p class="caption">Please do not do this.</p>
		</div>
	</div>
</div>
<div class="row-fluid">
	<div class="span6">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/segment_material_bad3.jpg"  alt="" />
			<p class="caption">Please make the regions bigger than this.</p>
		</div>
	</div>
	<div class="span6">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/segment_material_bad4.jpg"  alt="" />
			<p class="caption">These shapes contain multiple materials and are nowhere near the correct boundaries.</p>
		</div>
	</div>
</div>
<div class="row-fluid">
	<div class="span4">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/bad1.jpg"  alt="" />
			<p class="caption">This shape includes more than one type of material.</p>
		</div>
		<br/>
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/bad4.jpg"  alt="" />
			<p class="caption">This includes other objects; the other objects should have shapes around them.</p>
		</div>
	</div>
	<div class="span4">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/bad6.jpg"  alt="" />
			<p class="caption">This includes the edges of other objects.</p>
		</div>
		<br/>
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/bad3.jpg"  alt="" />
			<p class="caption">This shape is too sloppy.</p>
		</div>
	</div>
	<div class="span4">
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/bad5.jpg"  alt="" />
			<p class="caption">This contains more than one type of material.</p>
		</div>
		<br/>
		<div class="thumbnail">
			<img src="{{ STATIC_URL }}img/bad2.jpg"  alt="" />
			<p class="caption">This contains many substances.</p>
		</div>
	</div>
</div>
<br/>

<h2>How to draw</h2>
<div class="row-fluid">
	<div class="span12">
		<ul class="thumbnails">
			<li class="span4"> <div class="thumbnail"><p class="caption">
				<span class="badge">1</span> Click on the material boundary.</p>
				<img src="{{ STATIC_URL }}img/draw1.jpg" alt=""></div> </li>
			<li class="span4"> <div class="thumbnail"><p class="caption">
				<span class="badge">2</span> Continue clicking along the boundary.</p>
				<img src="{{ STATIC_URL }}img/draw5.jpg" alt=""></div> </li>
			<li class="span4"> <div class="thumbnail"><p class="caption">
				<span class="badge">3</span> Right-click to close the polygon.</p>
				<img src="{{ STATIC_URL }}img/draw6.jpg" alt=""></div> </li>
		</ul>
	</div>
</div>

<p>To close the shape, you do not need to click near the first point. You can
right-click to connect the first and last point.</p>

<h2>Adjust your shapes</h2>
<p>After drawing a polygon, please adjust its edges so that it better fits the true boundary.
When you are done adjusting, switch back to &quot;Draw&quot; mode to draw more polygons.</p>
<p>You can press the D and A key to quickly switch modes.</p>

<div class="row-fluid">
	<div class="span12">
		<ul class="thumbnails">
			<li class="span4"> <div class="thumbnail"><p class="caption">
				<span class="badge">1</span> Switch to &quot;Adjust&quot; mode.</p>
				<img src="{{ STATIC_URL }}img/adjust0.jpg" alt=""></div> </li>
			<li class="span4"> <div class="thumbnail"><p class="caption">
				<span class="badge">2</span> Click on the polygon.</p>
				<img src="{{ STATIC_URL }}img/adjust1.jpg" alt=""></div> </li>
			<li class="span4"> <div class="thumbnail"><p class="caption">
				<span class="badge">3</span> Drag the small white circles.</p>
				<img src="{{ STATIC_URL }}img/adjust2.jpg" alt=""></div> </li>
		</ul>
	</div>
</div>

<h2>Zoom in to see better</h2>
<p>Scroll with the mouse wheel to zoom in.  Click &quot;Reset Zoom&quot; or press escape to reset back to normal.</p>
<br/>

<h2>Move around in the image</h2>
<p>Press 'space' and drag with the mouse to move around in the image (panning).  You can also move press the arrow keys to move.</p>
<br/>

<h2>Other controls</h2>
<div class="row-fluid">
	<div class="span12">
		<img src="{{ STATIC_URL }}img/controls.jpg" alt="" />
	</div>
</div>
<div class="row-fluid">
	<div class="span12">
		<dl class="dl-horizontal">
			<dt>Undo</dt> <dd>If you make a mistake, click &quot;Undo&quot; or press Ctrl-Z.</dd>
			<dt>Redo</dt> <dd>You can also re-do an action with Ctrl-Y.</dd>
			<dt>Close</dt> <dd>To close a polygon, right-click on the image or you can click the &quot;Close&quot; button.</dd>
			<dt>Delete</dt> <dd>You can delete polygons by selecting them with the &quot;Adjust&quot; button and pressing delete.</dd>
			<dt>Reset Zoom</dt> <dd>When zoomed in, you you can click &quot;Reset Zoom&quot; to zoom out again.</dd>
			<dt>Instructions</dt> <dd>Show this page during the task.</dd>
		</dl>
	</div>
</div>
<br/>

<h2>Mirrors and windows</h2>
<p>If there is a mirror, draw a shape around the mirror surface itself, not the
things that you can see in the reflection.  Similarly, draw a shape around the
window glass, and not the things you can see through the window.</p>

<br/>
<h2>Why are we doing this?</h2>
<p>We are building a database of materials from images on the web.  This is part of ongoing research at Cornell University.</p>
<p>Thank you for participating!</p>
<br/>
